<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h4>两栏布局</h4>
  <div>两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，</div>
  <br>
  <div>方案一</div>
  <ul>
    <li>使用 float 左浮左边栏</li>
    <li>右边模块使用 margin-left 撑出内容块做内容展示</li>
    <li>为父级元素添加BFC，防止下方元素飞到上方内容</li>
  </ul>
  <br>
  <div>方案二</div>
  <ul>
    <li>父级display: flex;右侧 flex: 1;</li>
    <li>这个属性导致了列等高的效果。为了让两个盒子高度自动，需要设置: align-items: flex-start</li>
  </ul>
  <h4>三栏布局</h4>
  <div>三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之</div>
  <br>
  <ul>
    <li>两边使用 float，中间使用 margin。父级overflow: hidden; 生成BFC，计算高度时考虑浮动的元素</li>
    <li>两边使用 absolute，中间使用 margin</li>
  </ul>
</body>
</html>